<%--
  Created by IntelliJ IDEA.
  User: 小易好晕i
  Date: 2022/10/20
  Time: 15:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AnGuo Note 10 Pro立即购买--安果官网</title>
    <!-- 引入图标文件 -->
    <link rel="shortcut icon" href="image/favicon.ico">
    <!-- 引入初始化样式文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入商品页样式文件 -->
    <link rel="stylesheet" href="css/product.css">
    <!-- 放大镜样式 -->
    <script type="text/javascript">
        window.onload = function () {
            var box = document.getElementsByClassName("detail_le")[0];
            var small = box.children[0];
            var big = box.children[1];
            var bigImg = big.children[0];
            var mask = small.children[1];

            //big和mask在鼠标移入small时显示，移出时隐藏
            small.onmouseenter = function () {
                big.style.display = "block";
                mask.style.display = "block";
            };
            small.onmouseleave = function () {
                big.style.display = "none";
                mask.style.display = "none";
            };

            small.onmousemove = function (event) {
                event = event || window.event;
                //mask跟随鼠标移动，且不会超出small范围
                //x作为mask的left值，y作mask的top值。
                var pagex = event.pageX || scroll().left + event.clientX;
                var pagey = event.pageY || scroll().top + event.clientY;

                //减去mask宽高的一半，让鼠标在mask的中间
                var x = pagex - box.offsetLeft - mask.offsetWidth / 2;
                var y = pagey - box.offsetTop - mask.offsetHeight / 2;

                //不让mask超出small
                if (x < 0) {
                    x = 0;
                }
                if (x > small.offsetWidth - mask.offsetWidth) {
                    x = small.offsetWidth - mask.offsetWidth;
                }
                if (y < 0) {
                    y = 0;
                }
                if (y > small.offsetHeight - mask.offsetHeight) {
                    y = small.offsetHeight - mask.offsetHeight;
                }

                mask.style.left = x + "px";
                mask.style.top = y + "px";

                //bigImg随着mask的移动移动
                //比例 = 大图移动的距离/mask移动的距离 = 大图/小图
                var scale = bigImg.offsetWidth / small.offsetWidth;

                bigImg.style.marginLeft = -scale * x + "px";
                bigImg.style.marginTop = -scale * y + "px";
            }
        };
    </script>

</head>

<body>
<!-- 头部区域制作 -->
<div class="header">
    <div class="w">
        <!-- 头部左侧部分 -->
        <div class="header_le">
            <ul>
                <li>
                    <a href="index.html">安果商城</a>
                    <span>|</span>
                </li>

                <li>
                    <a href="#">MIUI</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">loT</a>
                    <span>|</span>
                </li>
                <li><a href="#">云服务</a>
                    <span>|</span>
                </li>
                <li><a href="#">天星数科</a>
                    <span>|</span>
                </li>
                <li><a href="#">有品</a>
                    <span>|</span>
                </li>
                <li><a href="#">安果开放平台</a>
                    <span>|</span>
                </li>
                <li><a href="#">企业团购</a>
                    <span>|</span>
                </li>
                <li><a href="#">资质证照</a>
                    <span>|</span>
                </li>
                <li><a href="#">协议规则</a>
                    <span>|</span>
                </li>
                <li><a href="#">下载APP</a>
                    <span>|</span>
                </li>
                <li><a href="#">智能生活</a>
                    <span>|</span>
                </li>
                <li><a href="#">Select Location</a></li>
            </ul>
        </div>
        <!-- 头部右侧部分 -->
        <div class="header_ri">
            <div class="enter">
                <ul>
                    <li>
                        <a href="#" onclick="alert('正在开发ing')">登录</a>
                        <span>|</span>
                    </li>
                    <li>
                        <a href="register.html">注册</a>
                        <span>|</span>
                    </li>
                    <li>
                        <a href="#">消息通知</a>
                    </li>
                </ul>
            </div>
            <!-- 购物车部分 -->
            <div class="shopcar">
                <span></span>
                购物车<em>(0)</em>
                <!-- 购物车下拉部分 -->
                <div class="shopcar_detail">
                    <p>购物车中还没有任何商品，赶紧选购吧</p>
                </div>
            </div>

        </div>

    </div>
</div>
<!-- 导航栏部分制作 -->
<div class="nav w">
    <!-- logo部分 -->
    <div class="logo">
        <h1><a href="index.html" title="安果官网">安果官网</a></h1>
    </div>
    <!-- 导航栏中部 -->
    <div class="nav_mi">
        <ul>
            <li class="all">
                <a href="#" class="all1">全部商品分类</a>
                <!-- 全部商品分类菜单制作 -->
                <div class="banner_nav">
                    <ul>
                        <li class="nav_detail1"><a href="#" class="banner_nav1">手机 电话卡</a>
                            <div class="detail_1">
                                <ul class="detail_goods">
                                    <li><a href="product1.html" class="detail_goods1"><img src="image/phone1.webp"
                                                                                           alt="">安果10</a></li>
                                    <li><a href="product.html" class="detail_goods1"><img src="image/phone2.webp" alt="">Note 10
                                        Pro</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/phone3.webp" alt="">AnGuo
                                        K30S
                                        至尊纪念版</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/phone4.webp" alt="">AnGuo
                                        Note9
                                        4G</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/phone5.webp"
                                                                              alt="">安果10S</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/phone6.webp" alt="">安果 11
                                        Ultra</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/phone7.webp" alt="">AnGuo
                                        K30
                                        至尊纪念版</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/phone8.webp" alt="">AnGuo
                                        Note8 Pro
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/phone9.webp" alt="">AnGuo
                                        K40</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav_detail2"><a href="#" class="banner_nav1">电视 盒子</a>
                            <div class="detail_2">
                                <ul class="detail_goods">
                                    <li><a href="product2.html" class="detail_goods1"><img src="image/tv1.webp" alt="">AnGuo MAX
                                        86
                                        超大屏</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/tv2.webp" alt="">AnGuo 智能电视
                                        X系列</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/tv3.webp" alt="">安果透明电视
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/tv4.webp" alt="">安果电视大师82英寸
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/tv5.webp"
                                                                              alt="">大师电视65英寸</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/tv6.webp" alt="">Rdemi 智能电视
                                        MAX</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/tv7.webp" alt="">安果电视5 Pro
                                        55英寸
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/tv8.webp" alt="">安果电视5 Pro
                                        65英寸
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/tv9.webp" alt="">安果电视5 Pro
                                        75英寸</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/tv10.webp" alt="">安果电视5
                                        75英寸</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/tv11.webp" alt="">安果电视5
                                        65英寸</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/tv12.webp"
                                                                              alt="">金属全面屏电视</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/tv13.webp"
                                                                              alt="">安果全面屏电视</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav_detail3"><a href="#" class="banner_nav1">笔记本 显示器</a>
                            <div class="detail_3">
                                <ul class="detail_goods">
                                    <li><a href="" class="detail_goods1"><img src="image/labtop1.webp"
                                                                              alt="">AnGuoBook Pro
                                        14</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/labtop2.webp"
                                                                              alt="">AnGuoBook Pro
                                        15
                                    </a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/labtop3.webp"
                                                                              alt="">AnGuoBook Pro
                                        16
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/labtop4.webp" alt="">AnGuo
                                        G 游戏本
                                        4G</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/labtop5.webp" alt="">安果笔记本
                                        Pro
                                        15</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/labtop6.webp"
                                                                              alt="">AnGuoBook Air
                                        13
                                    </a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/labtop7.webp"
                                                                              alt="">AnGuoBook 16
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/labtop8.webp" alt="">安果笔记本
                                        Pro
                                        14
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/labtop9.webp"
                                                                              alt="">AnGuoBook
                                        13</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav_detail4"><a href="#" class="banner_nav1">家电 插线板</a>
                            <div class="detail_4">
                                <ul class="detail_goods">
                                    <li><a href="" class="detail_goods1"><img src="image/homeapp1.webp"
                                                                              alt="">冰箱</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/homeapp2.webp" alt="">微波炉
                                    </a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/homeapp3.webp" alt="">电磁炉
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/homeapp4.webp" alt="">插线板
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/homeapp5.webp"
                                                                              alt="">立式空调</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/homeapp6.webp" alt="">电烤箱
                                    </a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/homeapp7.webp" alt="">电水壶
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/homeapp8.webp" alt="">新风机
                                    </a></li>

                                </ul>
                            </div>
                        </li>
                        <li class="nav_detail5"><a href="#" class="banner_nav1">出行 穿戴</a>
                            <div class="detail_5">
                                <ul class="detail_goods">
                                    <li><a href="" class="detail_goods1"><img src="image/walk1.webp"
                                                                              alt="">安果手环6</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/walk2.webp" alt="">平衡车</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/walk3.webp" alt="">滑板车
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/walk4.webp" alt="">自行车
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/walk5.webp"
                                                                              alt="">车载充电器</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/walk6.webp"
                                                                              alt="">智能后视镜</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/walk7.webp" alt="">智能记录仪
                                    </a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav_detail6"><a href="#" class="banner_nav1">智能 路由器</a>
                            <div class="detail_6">
                                <ul class="detail_goods">
                                    <li><a href="" class="detail_goods1"><img src="image/AI1.webp" alt="">打印机</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/AI2.webp" alt="">摄像机</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/AI3.webp" alt="">安果音响
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/AI4.webp" alt="">喷墨打印机
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/AI5.webp" alt="">照相机</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/AI6.webp" alt="">智能门锁</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/AI7.webp" alt="">安果路由器
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/AI8.webp" alt="">R视频门铃
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/AI9.webp" alt="">安果老师</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav_detail7"><a href="#" class="banner_nav1">电源 配件</a>
                            <div class="detail_7">
                                <ul class="detail_goods">
                                    <li><a href="" class="detail_goods1"><img src="image/power1.webp"
                                                                              alt="">移动电源</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/power2.webp" alt="">手机壳</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/power3.webp" alt="">数据线
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/power4.webp" alt="">AnGuo
                                        Note9
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/power5.webp" alt="">车充</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/power6.webp"
                                                                              alt="">无线充电器</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav_detail8"><a href="#" class="banner_nav1">健康 儿童</a>
                            <div class="detail_8">
                                <ul class="detail_goods">
                                    <li><a href="" class="detail_goods1"><img src="image/health1.webp"
                                                                              alt="">洗手机</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/health2.webp" alt="">体脂称
                                    </a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/health3.webp" alt="">走步机
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/health4.webp" alt="">剃须刀
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/health5.webp"
                                                                              alt="">早教启智</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/health6.webp" alt="">修剪器
                                    </a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/health7.webp" alt="">益智积木
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/health8.webp" alt="">牙刷

                                    </a></li>

                                </ul>
                            </div>
                        </li>
                        <li class="nav_detail9"><a href="#" class="banner_nav1">耳机 音响</a>
                            <div class="detail_9">
                                <ul class="detail_goods">
                                    <li><a href="" class="detail_goods1"><img src="image/erji1.webp" alt="">AnGuo
                                        AirDots
                                        3</a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/erji2.webp"
                                                                              alt="">安果安果触屏音箱</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/erji3.webp" alt="">品牌耳机
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/erji4.webp" alt="">安果音箱 Art
                                        电池版
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/erji5.webp" alt="">AnGuo
                                        音箱</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/erji6.webp" alt="">蓝牙音箱</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/erji7.webp" alt="">安果AI 音箱
                                    </a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav_detail10"><a href="#" class="banner_nav1">生活 箱包</a>
                            <div class="detail_10">
                                <ul class="detail_goods">
                                    <li><a href="" class="detail_goods1"><img src="image/bag1.webp" alt="">小背包</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/bag2.webp" alt="">床垫</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/bag3.webp" alt="">米兔
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/bag4.webp" alt="">双肩包
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/bag5.webp" alt="">枕头</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/bag6.webp" alt="">笔</a>
                                    </li>
                                    <li><a href="" class="detail_goods1"><img src="image/bag7.webp" alt="">胸包
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/bag8.webp" alt="">螺丝刀
                                    </a></li>
                                    <li><a href="" class="detail_goods1"><img src="image/bag9.webp" alt="">旅行箱</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a href="#">安果手机</a></li>
            <li><a href="#">AnGuo安果</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">家电</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
        </ul>
    </div>
    <!-- 导航栏搜索部分 -->
    <div class="search">
        <input type="text" class="search_1" placeholder="家电">
        <button class="search_2"></button>
    </div>
</div>
<!-- 产品导航栏部分 -->
<div class="brief">
    <!-- 确定版心 -->
    <div class="w">
        <!-- 产品导航栏左侧 -->
        <div class="brief_le">
            <h3>AnGuo Note 10 Pro</h3>
            <span>|</span>
            <a href="">AnGuo Note 10 5G</a>
        </div>
        <!-- 产品导航栏右侧 -->
        <div class="brief_ri">
            <a href="">概述页</a>
            <span>|</span>
            <a href="">参数页</a>
            <span>|</span>
            <a href="">F码通道</a>
            <span>|</span>
            <a href="">咨询客服</a>
            <span>|</span>
            <a href="">用户评价</a>
        </div>
    </div>
</div>
<!-- 产品介绍部分 -->
<div class="detail w">
    <!-- 产品介绍左侧图片部分 -->
    <div class="detail_le">
        <div class="small">
            <img src="image/商品介绍.jpg" alt="">
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="image/商品介绍big1.jpg" alt="">
        </div>
    </div>
    <!-- 产品介绍右侧 -->
    <div class="detail_ri">
        <!-- 产品参数及价格部分 -->
        <form action="productServlet" name="frm">
        <div class="parameter">
            <h2  name="name" >AnGuo Note 10 Pro</h2>
            <p class="orange">「付款前1000名赠价值99元安果定制T恤」</p>
            <p class="gray">天玑1100年度旗舰芯 / VC液冷散热 / 120Hz旗舰变速金刚屏 / 67W 闪充 5000mAh 大电池 /JBL 立体声双扬声器 / UFS 3.1 /
                6400万AI三摄
                / 多功能NFC 3.0
                / 旗舰级设计 艺术感工艺</p>
            <p class="orange">安果自营</p>
            <span class="orange"><button name="price" value="1699" id="d">1699元</button></span>
        </div>
        <!-- 选择版本部分制作 -->
        <div class="version">
            <h3>选择版本</h3>
            <ul>
                <li>
                    <label><a><input name="versions" type="radio" value="6+128" id="a">6+128</a></label>
                    <label><a><input name="versions" type="radio" value="8+128" id="b">8+128</a></label>
                    <label><a><input name="versions" type="radio" value="8+256" id="c">8+256</a></label>
                </li>
            </ul>
        </div>
        <!-- 选择颜色部分制作 -->
        <div class="select_color">
            <h3>选择版本</h3>
            <ul>
                <li>
                    <label><a><input name="colour" type="radio" value="星沙">星沙</a></label>
                    <label><a><input name="colour" type="radio" value="幻青">幻青</a></label>
                    <label><a><input name="colour" type="radio" value="月魄">月魄</a></label>
                </li>
            </ul>
        </div>
        <!-- 总价部分 -->
        <div class="sum">
            <p class="sum1">AnGuo Note 10 Pro 6GB+128GB 星纱</p>
            <h2 class="orange" >总计：1699元</h2>
        </div>
        <!-- 按钮部分 -->
        <div class="clickbutton">
            <!-- 购买部分 -->
            <div class="join">
                <button class="join" type="submit" >购买</button>
            </div>
            <!-- 加入购物车部分 -->
            <div class="like">
                <button class="like" type="submit" >加入购物车</button>
            </div>
        </div>
        </form>
        <!-- 备注部分 -->
        <div class="remarks">
            <li>
                <em>安果自营</em>
            </li>
            <li>
                <em>安果发货</em>
            </li>
            <li>
                <em>7天无理由退货</em>
            </li>
            <li>
                <em>运费说明</em>
            </li>
            <li>
                <em>企业信息</em>
            </li>
            <li>
                <em>7天价格保护</em>
            </li>
        </div>
    </div>
</div>
<!-- 价格说明部分制作 -->
<!-- 尾部区域制作 -->
<div class="footer w">
    <!-- 尾部区域服务部分 -->
    <div class="serve">
        <ul>
            <li><a href="#" class="serve_1">预约维修服务</a></li>
            <li><a href="#" class="serve_2">7天无理由退货</a></li>
            <li><a href="#" class="serve_3">15天免费换货</a></li>
            <li><a href="#" class="serve_4">满69包邮</a></li>
            <li><a href="#" class="serve_5">520余家售后网店</a></li>
        </ul>
    </div>
    <!-- 尾部区域指南部分 -->
    <div class="guild">
        <!-- 尾部区域指南左侧部分 -->
        <div class="guild_le">
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">购物指南</a></dd>
                <dd><a href="">订单操作</a></dd>
            </dl>
            <dl>
                <dt>服务支持</dt>
                <dd><a href="">售后政策</a></dd>
                <dd><a href="">自助服务</a></dd>
                <dd><a href="">相关下载</a></dd>
            </dl>
            <dl>
                <dt>线下门店</dt>
                <dd><a href="">安果之家</a></dd>
                <dd><a href="">服务网点</a></dd>
                <dd><a href="">授权体验店</a></dd>
            </dl>
            <dl>
                <dt>关于安果</dt>
                <dd><a href="">了解安果</a></dd>
                <dd><a href="">加入安果</a></dd>
                <dd><a href="">投资者关系</a></dd>
                <dd><a href="">企业社会责任</a></dd>
                <dd><a href="">廉洁举报</a></dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd><a href="">新浪微博</a></dd>
                <dd><a href="">官方微信</a></dd>
                <dd><a href="">联系我们</a></dd>
                <dd><a href="">公益基金会</a></dd>
            </dl>
            <dl>
                <dt>特色服务</dt>
                <dd><a href="">F码通道</a></dd>
                <dd><a href="">礼物码</a></dd>
                <dd><a href="">防伪查询</a></dd>
            </dl>
        </div>
        <!-- 尾部区域指南右侧部分 -->
        <div class="guild_ri">
            <h2>400-100-5678</h2>
            <p class="time">8:00-18:00(仅收市话费)</p>
            <a href="" class="customer">人工客服</a>
            <p class="view">关注安果：
                <a href="" class="qq"></a>
                <a href="" class="fire"></a>
            </p>

        </div>
    </div>
</div>
</body>
<script>
    function total() {
        totalValue = 0;
        selectNum = 0;
        num = 0;
        for (var j = 0; j < col_num.length; j++) {
            //总数量
            num += parseFloat(goods_num[j].value);
            if (checks[j].className == 'iconfont icon-duihao check-color') {
                // 选中后，进行减法运算，总价格发生变化。
                totalValue += parseFloat(col_total[j].innerHTML) * 100;
                selectNum += parseInt(goods_num[j].value);

            }
        }
        sumPrice.innerHTML = totalValue / 100;
        data_select.innerHTML = selectNum;
        data_sum.innerHTML = num;

    }
</script>
</html>
